<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图书列表</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
        }

        .el-header {
            /*background-color: #B3C0D1;*/
            background-color: #99CCCC;
            color: #333;
        }

        .el-aside {
            /*#D3DCE6;*/
            background-color: #545c64;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            height: 880px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .asideModel {
            height: 160px;
        }

        a {
            text-decoration: none;
        }

        .logoImg {
            float: left;
            width: 180px;
            height: 90px;
            margin: 30px 30px 10px 30px;
            opacity: 0.85;
        }

        .mainBtn123 {
            /*float: left;*/
            width: 180px;
            height: 40px;
            margin: 0px 30px 30px 30px;
        }

        .link {
            margin: 10px 0px 0px 0px;
            height: 50px;
        }

        .changespan {
            text-align: right;
            margin-right: -20px;
        }

        .outspan {
            text-align: right;
            padding-right: 20px;
        }

        .headImg {
            float: right;
            border: 2px solid lightslategray;
            margin-top: 10px;
            margin-right: 10px;
        }

        .username {
            float: right;
            line-height: 70px;
        }

        .el-tabs--border-card {
            height: 100%;
        }

        .el-submenu .el-menu-item {
            color: #99CCCC !important;
        }

        .el-menu-item.is-active {
            color: #ffd04b !important;
        }

        .el-table {
            margin: 10px auto;
        }

        .el-table .cell {
            text-align: center;
        }

        .tableHead {
            text-align: left;
            font-size: 22px;
            margin: 20px 0px 0px 60px;
        }

        .el-select {
            width: 100%;
        }

        .el-button el-button--primary {
            margin-left: 20px;
        }

        .demo-form-inline {
            text-align: left;
            margin-left: 100px;
            margin-top: 15px;
        }

        .el-dialog {
            width: 34%;
        }

        .el-dialog__footer {
            text-align: center;
        }

        .el-dialog__body {
            padding: 30px 100px;
        }

        .myInput {
            margin-top: 20px;
        }

    </style>
</head>
<body>
<div id="mydiv">
    <el-container>
        <el-aside width="240px">
            <!--系统名称和logo-->
            <div class="titleHead"><img class="logoImg" src="/secondStage/img/logo333.png"/>
                <a href="/secondStage/main.html">
                    <el-button type="primary" icon="el-icon-s-home" class="mainBtn123">首 页</el-button>
                </a>
            </div>
            <el-row class="tac">
                <el-col :span="24">
                    <el-menu default-active="402" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose"
                             background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu :index="menus.pid" v-for="menus in usermenus">
                            <template slot="title">
                                <i :class="menus.glyphicon"></i>
                                <span>{{menus.pname}}</span>
                            </template>
                            <el-menu-item-group v-for="menu in menus.menuList">
                                <a :href="menu.url">
                                    <el-menu-item :index="menu.pid">
                                        <i :class="menu.glyphicon"></i>
                                        {{menu.pname}}
                                    </el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>

        </el-aside>
        <el-container>
            <el-header style="height: 60px">
                <el-row>
                    <!--头像-->
                    <el-col :span="5" :offset="15">
                        <span class="username">欢迎您：<strong>{{username}}</strong></span>
                        <el-avatar :size="45" :src="circleUrl" class="headImg"></el-avatar>
                    </el-col>
                    <el-col :span="2" class="changespan">
                        <el-link href="/secondStage/html/alterPassword.html" icon="el-icon-edit" class="link">修改密码
                        </el-link>
                    </el-col>
                    <el-col :span="2" class="outspan">
                        <el-link @click="islogout" icon="el-icon-switch-button" class="link">退出登录</el-link>
                    </el-col>

                </el-row>

            </el-header>
            <el-main>
                <!--导航栏-->
                <el-tabs type="border-card" v-model="activeName">
                    <el-tab-pane label="首页" disabled></el-tab-pane>
                    <el-tab-pane label="图书分类管理" name="gameConfig">
                        <p class="tableHead">图书分类列表&nbsp;<i class="el-icon-bottom-right"></i>&nbsp;&nbsp;&nbsp;<el-button
                                type="primary" icon="el-icon-circle-plus-outline" @click="addClick">添加分类
                        </el-button>
                        </p>

                        <!--此处应为每个页面不同的显示区域-->
                        <el-table :data="tableData" style="width: 75%" highlight-current-row stripe>
                            <el-table-column prop="tsb_id" label="图书一级分类编号" width="290"></el-table-column>
                            <el-table-column prop="tsb_name" label="图书一级分类名称" width="290"></el-table-column>
                            <el-table-column prop="ssb_id" label="图书二级分类编号" width="290"></el-table-column>
                            <el-table-column prop="ssb_name" label="图书二级分类名称"></el-table-column>
                        </el-table>
                        <!--分页组件-->
                        <el-pagination
                                background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="1"
                                :page-sizes="[5, 10, 20]"
                                :page-size="10"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalCount">
                        </el-pagination>

                        <!--新增图书分类的模态框-->
                        <el-dialog title="新增图书分类信息" :visible.sync="dialogFormVisible2">
                            <el-form :model="form2" status-icon :rules="rules" ref="form2">
                                <el-form-item prop="tsb">
                                    <el-select v-model="form2.tsb" placeholder="一级分类" @change="selectSecondSort"
                                               v-if="!insertTop">
                                        <!--<el-option key="00" label="一级分类" value="00" disabled></el-option>-->
                                        <el-option :key="tsbInfo.tsb_id" v-for="tsbInfo in tsbVal"
                                                   :label="tsbInfo.tsb_name"
                                                   :value="tsbInfo.tsb_id"></el-option>
                                        <el-option label="没找到？点击新增" value="insertTop"
                                                   style="color: #409EFF"></el-option>
                                    </el-select>
                                    <el-input v-model="form2.tsb" placeholder="请输入要新增的图书一级分类名称"
                                              v-if="insertTop"></el-input>
                                </el-form-item>
                                <el-select placeholder="二级分类已存在分类" v-if="!insertSecond">
                                    <el-option :key="ssbInfo.ssb_id" v-for="ssbInfo in ssbVal" :label="ssbInfo.ssb_name"
                                               :value="ssbInfo.ssb_id" disabled></el-option>
                                </el-select>
                                <el-form-item prop="ssb">
                                    <el-input v-model="form2.ssb" placeholder="请输入要新增的图书二级分类名称"
                                              class="myInput"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                <el-button type="primary" @click="submitTheAdd('form2')">确 定</el-button>
                            </div>
                        </el-dialog>


                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#mydiv",
        data() {
            // 表单校验规则
            var checkTsb = (rule, value, callback) => {
                if (this.form2.tsbAddEither) {
                    if (value === '') {
                        return callback(new Error('一级分类不能为空'));
                    } else {
                        for (let i = 0; i < this.tsbVal.length; i++) {
                            if (value == this.tsbVal[i].tsb_name) {
                                return callback(new Error('一级分类已存在'));
                            }
                        }
                    }
                }
                callback();
            };
            var checkSsb = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('请输入二级分类'));
                } else if (!this.form2.tsbAddEither) {
                    for (let i = 0; i < this.ssbVal.length; i++) {
                        // console.log(this.ssbVal[i].ssb_name);
                        // console.log(value)
                        if (value == this.ssbVal[i].ssb_name) {
                            return callback(new Error('二级分类已存在'));
                        }
                    }
                }
                callback();
            };

            return {
                usermenus: "",
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                username: "",
                activeName: "gameConfig",
                tableData: [],
                totalCount: "", // 分页的总条数
                dialogFormVisible2: false, // 模态框显示隐藏的控制变量
                formLabelWidth: '120px',
                form2: {      // 新增的表单
                    tsb: '',
                    ssb: '',
                    tsbAddEither: false     // 是否同时新增一级菜单和二级菜单的标识符，判断是否涉及到多表插入
                },
                tsbVal: [],
                ssbVal: [],
                insertTop: false,
                insertSecond: false,
                rules: {
                    tsb: [
                        {validator: checkTsb, required: true, trigger: 'change'}
                    ],
                    ssb: [
                        {validator: checkSsb, required: true, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            // 打开新增图书分类的模态框，重置模态框信息
            addClick() {
                this.dialogFormVisible2 = true;
                this.insertTop = false;
                this.insertSecond = false;
                this.form2.tsbAddEither = false;
                this.form2.tsb = '';
                this.form2.ssb = ''
            },
            // 根据一级分类id查询二级分类
            selectSecondSort() {
                if (this.form2.tsb == 'insertTop') {
                    this.insertTop = true;
                    this.insertSecond = true;
                    this.form2.tsb = "";
                    this.form2.tsbAddEither = true;
                    return;
                }
                console.log(this.form2.tsb);
                this.form2.ssb = '';
                axios.post('/secondStage/book', 'method=getSecondSort&tsbId=' + this.form2.tsb)
                    .then(response => {
                        // console.log(response);
                        this.ssbVal = response.data.secondSortList;
                    }).catch(function (error) {
                    console.log(error);
                });

            },

            // 新增信息提交
            submitTheAdd(addForm) {
                // console.log(addForm)
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible2 = false;
                        var submit = window.Qs.stringify(this.form2) + "&method=insertBookSortInfo";
                        console.log(submit);
                        axios.post('/secondStage/editBook', submit)
                            .then(response => {
                                console.log(response);
                                if (response.data.returnCode == 200) {
                                    this.$message({
                                        showClose: true,
                                        message: '图书分类新增成功',
                                        type: 'success',
                                        center: true
                                    });
                                } else {
                                    this.$message({
                                        showClose: true,
                                        message: '图书分类新增失败，请重试或联系管理员',
                                        type: 'error',
                                        center: true
                                    });
                                }
                                this.refreshTable('method=getBookSortInfo&page=1&pageSize=10');
                            }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },


            // 分页相关
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                let formInfo = window.Qs.stringify(this.formInline);
                let param = 'method=getBookSortInfo&page=1&pageSize=' + val;
                this.refreshTable(param);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                let formInfo = window.Qs.stringify(this.formInline);
                let param = 'method=getBookSortInfo&pageSize=10&page=' + val;
                this.refreshTable(param);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            islogout() {
                this.$confirm('此操作将退出系统, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    location.href = "/secondStage/login?method=logout";
                });
            },

            // 异步请求获得用户权限信息，姓名和头像，以及刷新用户表单数据
            refreshTable(param) {
                axios.post('/secondStage/book', param)
                    .then(response => {
                        console.log(response);
                        if (response.data.returnCode == 200) {
                            this.usermenus = response.data.returnData;
                            this.circleUrl = "/secondStage/" + response.data.returnAccount.aimg;
                            this.username = response.data.returnAccount.aname;
                            this.totalCount = response.data.pageInfo.totalCount;
                            this.tableData = response.data.pageInfo.bookSecondSortList;

                            // 给一级查询的下拉框赋值
                            this.tsbVal = response.data.topSortList;

                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        created() {
            this.refreshTable('method=getBookSortInfo&page=1&pageSize=10');
        }
    })
</script>
</html>
